spread operator JSX Spread Operator 리엑트 프로젝트를 보면 props를 <Component {...props} />와 같은 형태로 전달하는 것을 자주 보았다 느낌상 어떠한 의미인지는 알겠지만 좀 더 정확하게 알고 싶어 찾아보았다 리엑트에서 attributes를 전달할 때 아래의 두 코드는 같다 모든 props가 아니라 특정값들은 선택해서 사용하고 '나머지를 넘겨줌' 느낌으로도 사용이 가능하다 재사용이 가능한 component를... spread operatorReactReact Shallow Copy vs Deep Copy feat.Spread Operator {...} source: Spread Operator는 Deep Copy를 만들어준다 하지만 데이터가 nested 되어 있을 경우에는 nested data는 shallow copy가 된다. 따라서 nested 되어있는 부분도 deep copy 하려면 {...a, b: {...b.foods}}이런식으로 또 한번의 Spread Operator를 행해 주어야 한다 source:... deep copyspread operatorES5shallow copyES5 Premitive & Reference (원시값과 참조값) String Boolean Primitive 🏐 단순히 값이 같으면 동일하게 판별 String은 Primitive(원시값)이다. 원시값의 모양이 같으면 같은 값으로 단순하게 판별한다. 🏐 할당된 값은 그대로 a가 10인 시점에서 b에 값을 한번 할당했기 때문에 a의 값이 변경되어도 다시 a를 할당하지 않는 한b는 변경되지 않는다. 🏐 변수 생성 과정 메모리에 { id: '1', count: ... referenceshallow copy참조값spread operatorpremitive원시값복사얕은복사 전개연산자premitive Day.12 바닐라 자바스크립트(2021.08.17) UI를 기준으로 컴포넌트를 나누니 변경사항이 발생했을때 너무 편하고 오류가 발생하더라도 더 잘찾을수 있는 것 같다. 뭐가 좋은지는 알겠지만 아직 자유자재로 UI기반 컴포넌트로 코드를 짤수는 없지만 연습하다보면 점점 나아질거다. 위 코드에서 ...이라는 spread operator가 사용되었는데 저게 너무 궁금해서 콘솔창에 출력해봤는데 오류가 뜬다. 그래서 이유를 찾아보다가 몰랐던 구조분해할당... 구조분해할당UI컴포넌트spread operatorES6vanillajsES6 [JavaScript] Spread Operator 활용 방법 안녕하세요 :) 이번 글에서는 Spread Operator라는 개념에 대해 알아보겠습니다. 먼저 Spread의 영단어 뜻을 네이버 영어사전에 검색해보면 펼치다라는 뜻이 나옵니다. 실제 자바스크립트에서도 이런 느낌으로 이해하시면 될 것 같습니다. 어떠한 문자열, 배열, 객체등을 감싸고 있는것을 ... 이라는 문법을 통하여 감싸고 있는 것을 허물어서 펼쳐주는거라고 보시면 됩니다. 이런식으로 가지... spread operatorspread operator TIL6: Destructuring Assignment / Rest Parameter and Spread Operator / Shorthand Syntax Destructing Assignment(분해 할당) Rest Parameter(나머지 매개변수)와 Spread Operator(전개 연산자) Shorthand Syntax(단축 문법) 코드 및 자료 출처:... destructing assignment전개 연산자단축 문법rest parameterspread operator나머지 매개변수shorthand syntax분해 할당destructing assignment
JSX Spread Operator 리엑트 프로젝트를 보면 props를 <Component {...props} />와 같은 형태로 전달하는 것을 자주 보았다 느낌상 어떠한 의미인지는 알겠지만 좀 더 정확하게 알고 싶어 찾아보았다 리엑트에서 attributes를 전달할 때 아래의 두 코드는 같다 모든 props가 아니라 특정값들은 선택해서 사용하고 '나머지를 넘겨줌' 느낌으로도 사용이 가능하다 재사용이 가능한 component를... spread operatorReactReact Shallow Copy vs Deep Copy feat.Spread Operator {...} source: Spread Operator는 Deep Copy를 만들어준다 하지만 데이터가 nested 되어 있을 경우에는 nested data는 shallow copy가 된다. 따라서 nested 되어있는 부분도 deep copy 하려면 {...a, b: {...b.foods}}이런식으로 또 한번의 Spread Operator를 행해 주어야 한다 source:... deep copyspread operatorES5shallow copyES5 Premitive & Reference (원시값과 참조값) String Boolean Primitive 🏐 단순히 값이 같으면 동일하게 판별 String은 Primitive(원시값)이다. 원시값의 모양이 같으면 같은 값으로 단순하게 판별한다. 🏐 할당된 값은 그대로 a가 10인 시점에서 b에 값을 한번 할당했기 때문에 a의 값이 변경되어도 다시 a를 할당하지 않는 한b는 변경되지 않는다. 🏐 변수 생성 과정 메모리에 { id: '1', count: ... referenceshallow copy참조값spread operatorpremitive원시값복사얕은복사 전개연산자premitive Day.12 바닐라 자바스크립트(2021.08.17) UI를 기준으로 컴포넌트를 나누니 변경사항이 발생했을때 너무 편하고 오류가 발생하더라도 더 잘찾을수 있는 것 같다. 뭐가 좋은지는 알겠지만 아직 자유자재로 UI기반 컴포넌트로 코드를 짤수는 없지만 연습하다보면 점점 나아질거다. 위 코드에서 ...이라는 spread operator가 사용되었는데 저게 너무 궁금해서 콘솔창에 출력해봤는데 오류가 뜬다. 그래서 이유를 찾아보다가 몰랐던 구조분해할당... 구조분해할당UI컴포넌트spread operatorES6vanillajsES6 [JavaScript] Spread Operator 활용 방법 안녕하세요 :) 이번 글에서는 Spread Operator라는 개념에 대해 알아보겠습니다. 먼저 Spread의 영단어 뜻을 네이버 영어사전에 검색해보면 펼치다라는 뜻이 나옵니다. 실제 자바스크립트에서도 이런 느낌으로 이해하시면 될 것 같습니다. 어떠한 문자열, 배열, 객체등을 감싸고 있는것을 ... 이라는 문법을 통하여 감싸고 있는 것을 허물어서 펼쳐주는거라고 보시면 됩니다. 이런식으로 가지... spread operatorspread operator TIL6: Destructuring Assignment / Rest Parameter and Spread Operator / Shorthand Syntax Destructing Assignment(분해 할당) Rest Parameter(나머지 매개변수)와 Spread Operator(전개 연산자) Shorthand Syntax(단축 문법) 코드 및 자료 출처:... destructing assignment전개 연산자단축 문법rest parameterspread operator나머지 매개변수shorthand syntax분해 할당destructing assignment